<template>
  <div id="show-blog" class="container">
      <div>
          <h1>ShowBlog</h1>
          <input type="text" v-model="search" class="form-control" placeholder="搜索"/>
          <div v-for="blog in filterBlogs"  class="blog-body">
                <router-link v-bind:to="'/blog/' + blog.id">
                    <h3>{{blog.title}}</h3>
                    <article >{{blog.content | ellipsisBody}}</article>
                </router-link>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'show-blog',
    data(){
        return {
            blogs:[],
            search:''
        }
    },
    created(){
        this.$http.get('http://127.0.0.1:8000/myblog/api/blogs')
        .then((response)=>{
            console.log(response.body);
            this.blogs = response.body;
        });
    },
    filters:{
        ellipsisBody(value){
            return value.slice(0,200)+'...';
        }
    },
    computed:{
        filterBlogs(){
            return this.blogs.filter((blog)=>{
                return blog.title.match(this.search);
            });
        }
    }
}
</script>

<style scoped>
    .blog-body{
        background-color:rgba(226, 216, 216, 0.5);
        border-radius: 5px;
    }
    a{
        text-decoration-line: none;
        color: black
    }
</style>
